Interactive animation

#1

Here is an example of interactive animation made with Keyshot.

LayerZero 250 A 208 V 3-Pole eSTS Static Transfer Switch

You can switch between paint colors (gray or black) and open and close each door independently. For some products, you can also rotate between different sides of the product.

This is a fun way to get a better understanding of the product’s features and functionality, and visually see exactly how each product will look.

3 Likes
#2

That’s cool. Can you share a bit about how it was made? What was actually output from KeyShot? Was it just individual animations, then some custom coding on the website to get the interactive parts?

#3

The frames were generated in Keyshot and custom-coding on the website makes it interactive. Here is the overall process:

  1. Door animations are generated in Keyshot and sliced into individual frames using Photoshop.
  2. Spritesheets are created for various door types (OuterDoor, InnerDoor, SideDoor) and colors (Gray, Black).
  3. The web application loads these spritesheets as assets and displays a loading progress bar.
  4. Different door states (e.g., ‘OUTER_CLOSED’, ‘INNER_CLOSED’) are defined to represent their positions.
  5. A function is defined to open and close doors based on their current state, triggered by user-clicked buttons.
  6. Buttons enable users to switch between door colors (Gray and Black).
  7. The code captures current animations’ state and frames, switches colors, and displays animations for the new color.
  8. After both inner doors (InnerDoor and InnerDoor1) are open, an extra step closes the outer door (OuterDoor), completing the sequence.

This allows users to open and close doors with buttons, switch between door colors, and ensures that the sequence is completed by closing the outer door after both inner doors are open. Each product is a little different (some have front-only access, others have front and side access, some have multiple inner doors), so the code had to be modified slightly for each product.

1 Like
#4

That’s cool! Thanks for sharing. Sounds like a fair bit of work when listed out like this, but my guess is that it goes farily quickly for someone who knows what they’re doing.

#5

Once you figure out a system it doesn’t take too long.

Most of the work is in file preparation, making sure all of the assets are named consistently and aligned perfectly. Using Photoshop actions helps speed up the process, especially when dealing with a large number of files.